<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import api from '@/api'
import { Message } from '@arco-design/web-vue'
import UploadImage from '@/components/uploadImage.vue'
import WangEditor from '@/components/WangEditor.vue'

const $route = useRoute()
const $router = useRouter()

const courseList = ref([])
const allStatus = ref(null)
const popconfirmContent = ref('')
const editorRef = ref(null)
const listData = ref()
const pageVal = ref(1)
const pageSize = ref(10)
const listTotal = ref(0)
const listLoading = ref(false)
const formVisible = ref(false)
const formData = ref({
  id: null,
  title: '',
  banner: '',
  type: null,
  content1: '',
  content2: '',
  content3: null,
})

const getListData = async (page) => {
  listLoading.value = true
  try {
    const res = await api.get('system/publicize/list', {
      params: {
        page,
        pageSize: pageSize.value,
      },
    })
    console.log('res', res)
    listData.value = res.data.items
    listTotal.value = res.data.pageInfo.total
    pageVal.value = page
    allStatus.value = res.data.pageInfo.allStatus
  } catch (error) {
    console.error(error)
  }
  listLoading.value = false
}

const getCourseList = async () => {
  try {
    const res = await api.get('course/options')
    console.log('res', res)
    courseList.value = res.data.items
  } catch (error) {
    console.error(error)
  }
}

const deleteItem = async (id) => {
  try {
    const res = await api.get('system/publicize/del/' + id)
    Message.success(res.message)
    getListData(1)
  } catch (error) {
    console.error('error', error)
    return false
  }
}

const handleChangeAllStatus = async (newValue) => {
  console.log('newValue', newValue)
  if (newValue == 0) {
    popconfirmContent.value = '确定改为关闭状态吗？'
  } else {
    popconfirmContent.value = '确定改为开启状态吗？'
  }
  return false
}

const changeAllStatus = async () => {
  try {
    const res = await api.get(
      'system/publicize/allStatus/' + (allStatus.value ? 0 : 1)
    )
    Message.success(res.message)
    getListData(1)
  } catch (error) {
    console.error('error', error)
    return false
  }
}

const changeItemStatus = async (id) => {
  try {
    const res = await api.get('system/publicize/status/' + id)
    Message.success(res.message)
    getListData(1)
  } catch (error) {
    console.error('error', error)
    return false
  }
}

const showFormData = async (record) => {
  if (record) {
    formData.value.id = record.id
    formData.value.title = record.title
    formData.value.banner = record.banner
    formData.value.type = record.type
    switch (record.type * 1) {
      case 1:
        formData.value.content1 = record.content
        break
      case 2:
        formData.value.content2 = record.content
        break
      case 3:
        formData.value.content3 = record.content * 1
        break
    }
  } else {
    resetFormData()
  }
  formVisible.value = true
}

const formSubmit = async () => {
  var obj = { ...formData.value }
  switch (obj.type * 1) {
    case 1:
      obj.content = editorRef.value.getEditorVal()
      break
    case 2:
      obj.content = obj.content2
      break
    case 3:
      obj.content = obj.content3
      break
  }
  if (!obj.title) {
    Message.error('标题不可为空')
    return false
  }
  if (!obj.banner) {
    Message.error('banner图片不可为空')
    return false
  }
  if (formData.value.id) {
    try {
      const res = await api.post('system/publicize/update', obj)
      Message.success(res.message)
      getListData(1)
      resetFormData()
    } catch (error) {
      console.error('error', error)
      return false
    }
  } else {
    try {
      const res = await api.post('system/publicize/create', obj)
      Message.success(res.message)
      formVisible.value = false
      getListData(1)
      resetFormData()
    } catch (error) {
      console.error('error', error)
      return false
    }
  }
}

const resetFormData = async () => {
  formData.value = {
    id: null,
    title: '',
    banner: '',
    type: null,
    content1: '',
    content2: '',
    content3: null,
  }
}

getListData(1)
getCourseList()
</script>

<template>
  <div class="page">
    <div class="header">
      <div>
        宣传栏状态
        <a-popconfirm @ok="changeAllStatus"
                      :content="popconfirmContent"
                      type="warning">
          <a-switch :beforeChange="handleChangeAllStatus"
                    v-model="allStatus"
                    v
                    :checked-value="1"
                    :unchecked-value="0" />
        </a-popconfirm>
      </div>
      <a-button @click="showFormData()"
                type="primary">新建宣传</a-button>
    </div>

    <a-table :data="listData"
             @page-change="getListData"
             :pagination="{
              showTotal: true,
              size: 'small',
              total: listTotal,
              pageSize: pageSize,
              current: pageVal,
            }">
      <template #columns>
        <a-table-column title="序号"
                        :width="60">
          <template #cell="{ rowIndex }"> {{ rowIndex + 1 }} </template>
        </a-table-column>
        <a-table-column title="标题"
                        data-index="title"></a-table-column>
        <a-table-column title="banner图片">
          <template #cell="{ record }">
            <a-image width="100"
                     height="100"
                     fit="cover"
                     :src="record.banner" />
          </template>
        </a-table-column>
        <a-table-column title="类型">
          <template #cell="{ record }">
            <div v-if="record.type==1">文案类型</div>
            <div v-if="record.type==2">链接类型</div>
            <div v-if="record.type==3">课程类型</div>
          </template>
        </a-table-column>
        <a-table-column title="启用/禁用">
          <template #cell="{ record }">
            <a-popconfirm @ok="changeItemStatus(record.id)"
                          :content="popconfirmContent"
                          type="warning">
              <a-switch :beforeChange="handleChangeAllStatus"
                        v-model="record.status"
                        :checked-value="1"
                        :unchecked-value="0" />
            </a-popconfirm>
          </template>
        </a-table-column>
        <a-table-column title="编辑时间"
                        data-index="updated_at"></a-table-column>
        <a-table-column title="操作"
                        align="center"
                        :width="300">
          <template #cell="{ record }">
            <a-space>
              <a-popconfirm @ok="deleteItem(record.id)"
                            content="确认删除该数据吗?"
                            type="warning">
                <a-button type="primary"
                          status="danger"
                          size="mini">删除</a-button>
              </a-popconfirm>
              <a-button @click="showFormData(record)"
                        type="primary"
                        size="mini">编辑</a-button>
            </a-space>
          </template>
        </a-table-column>
      </template>
    </a-table>

    <a-modal :title="formData.id ? '编辑宣传':'新建宣传'"
             width="800px"
             :on-before-ok="formSubmit"
             v-model:visible="formVisible">
      <a-form>
        <a-form-item label="标题">
          <a-input :style="{width:'800px'}"
                   v-model="formData.title"
                   placeholder="请输入标题"
                   allow-clear></a-input>
        </a-form-item>
        <a-form-item label="banner图片"
                     help="推荐上传16:9比例的图片">
          <div style="width: 400px">
            <UploadImage width="200px"
                         height="200px"
                         v-model="formData.banner"></UploadImage>
          </div>
        </a-form-item>
        <a-form-item label="类型">
          <a-select v-model="formData.type"
                    :style="{width:'800px'}"
                    placeholder="请选择类型">
            <a-option :value="1">文案类型</a-option>
            <a-option :value="2">链接类型</a-option>
            <a-option :value="3">课程类型</a-option>
          </a-select>
        </a-form-item>

        <a-form-item v-if="formData.type==1"
                     label="文案">
          <WangEditor ref="editorRef"
                      :content="formData.content1"></WangEditor>
        </a-form-item>
        <a-form-item v-if="formData.type==2"
                     label="跳转链接">
          <a-input :style="{width:'800px'}"
                   v-model="formData.content2"
                   placeholder="请输入跳转链接"
                   allow-clear></a-input>
        </a-form-item>
        <a-form-item v-if="formData.type==3"
                     label="关联课程">
          <a-select v-model="formData.content3"
                    :style="{width:'800px'}"
                    placeholder="请选择关联课程">
            <a-option v-for="(item,index) in courseList"
                      :key="index"
                      :value="item.id">{{ item.name }}</a-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<style scoped>
.page {
  height: 100%;
}

.header {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>